<template>
	<view class="content">
		<view class="goodsInfo">
			<view class="star">
				<view class="starText">{{msgDict.starShangpin}}</view>
				<uni-rate v-model="starShangpin" activeColor="#5360FF" :size="20" :margin="5" style="margin-left: 10upx; height: 40upx;" />
			</view>
			<view class="star starBottom">
				<view class="starText">{{msgDict.starWuliu}}</view>
				<uni-rate v-model="starWuliu" activeColor="#5360FF" :size="20" :margin="5" style="margin-left: 10upx;height: 40upx;" />
			</view>
			<view class="star">
				<view class="starText">{{msgDict.starFuwu}}</view>
				<uni-rate v-model="starFuwu"  activeColor="#5360FF" :size="20" :margin="5" style="margin-left: 10upx;height: 40upx;" />
			</view>
			<view class="uni-textarea">
				<textarea v-model="evaContent" placeholder-style="color:#999;font-size:24upx" @blur="bindTextAreaBlur"
				 :placeholder="msgDict.share" style="height: 100upx;color: #333333;" />
			</view>
			<view class="bottom">
			   <label class="radio" @click="radioChange"><radio style="transform:scale(0.65)" value="r1" :checked="isCheck"  color="#5360FF"/>{{msgDict.anonymous}}</label>
			   <text class="text3">{{msgDict.anonymously}}</text>
			</view>
        </view>
        <view class="submitView showBtnBackColor"@click="clickSubmit">{{msgDict.submit}}</view>
    </view>
</template>

<script>
  
  import {eva} from '@/api/index.js';
  export default  {
  data() {
   return {
   
     isCheck:false,
	 userId:'',
     evaContent:'',
	 starShangpin:5,
	 starWuliu:5,
	 starFuwu:5,
     deliveryCode:'',
	 orderCode:'',
	 msgDict:{}
     
   }
  },
 
  onLoad(options){
	  
   if (options.deliveryCode) {
   	
   this.deliveryCode = options.deliveryCode
   this.orderCode = options.orderCode
   }
   this.userId = getApp().globalData.userId
   this.msgDict = getApp().globalData.$t('appraise');
  },
   methods: {
     
    // onChange(e,index) {
    //     console.log('rate发生改变:' + JSON.stringify(e))
    //     console.log();
                   
    // },
    
    bindTextAreaBlur: function (e) {
           console.log(e.detail.value)
         
        
    },
    
    radioChange() {
    
	 if(this.isCheck) {
	 	this.isCheck = false
	 	
	 } else {
	 	this.isCheck = true
	 }
    
    },
    
	//发布评论
	async clickSubmit() {
		
		if (this.starFuwu == 0 || this.starShangpin == 0 || this.starWuliu == 0) {
			
			uni.showToast({
				title:'星级评价要大于0',
				icon:'none'
			})
			return 
	
		}
		if (this.evaContent == '') {
			
			uni.showToast({
				title:'请填写购物感受',
				icon:'none'
			})
			return 
			
		}
		
		

		  const json = await eva({deliveryListCode:this.deliveryCode,evaContent:this.evaContent,goodsStar:this.starShangpin,invisible:this.isCheck?'1':'0',logisticStar:this.starWuliu,serviceStar:this.starFuwu,userId:this.userId,orderCode:this.orderCode})
		  uni.showToast({
		  	title:json.msg,
			icon:'none'
		  })
		  let pages = getCurrentPages();
		  let page = pages[pages.length - 2];
		  page.$vm.onPullDownRefresh();
		  uni.navigateBack({
		  	delta:1
		  })
		 
	}  
   }
 }
</script>

<style lang="less" scoped>
 page {
  background-color: #F2F2F2;
 }

 .content {

  padding:0 20upx 20upx 20upx;
  display: flex;
  flex-direction: column;
 .goodsInfo {
   display: flex;
   // width: 100%;
   margin-top: 20upx;
   flex-direction: column;
   background: #FFFFFF;
   box-shadow: 0px 2px 10px 0px #EEF0F4;
   border-radius: 8px;
   padding: 20rpx 30rpx;
   justify-content: center;
   .starBottom{
	   border-bottom: thin solid #f2f2f2;
	   border-top: thin solid #f2f2f2;
   }
   .star{
    // margin-top: 25upx;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 88upx;
    .starText {
		 height: 50upx;
		 font-size: 28upx;
		 font-weight: bold;
		 color: #333333;
		 line-height: 50upx;
		 margin-right: 16rpx;
        }
    }
   .uni-textarea {
    margin-top: 30upx;
	min-height: 170rpx;
    border-radius: 10rpx;
	border:thin solid #f2f2f2;
	padding: 20rpx;
	
	textarea{
		font-size: 24rpx;
	}
   }
    .bottom {
    margin-top: 20upx;
    // background-color: #007AFF;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    .radio {
        font-size: 26upx;
        font-weight: 400;
        color: #333333;       
    }
    .text3 {
     font-size: 24upx;
     font-weight: 400;
     color: #888;
    }
    
    
   }
  }
      
   .submitView {
     height: 84rpx;
	 margin: 200rpx 36rpx 0;
	 text-align: center;
	 line-height: 84rpx;
     // background: #FF1493;
     border-radius: 41rpx;
     font-size: 32upx;
     font-weight: 400;
     color: #FFFFFF;

   }
   
 }
</style>
